<template>
  <div>
    <div class="comment-module" v-for="(item,index) in Posts" :key="index" ﻿@tap="toDetail(item.id)">
      <div class="commentMd-content">
        <div><p>{{item.title}}</p>
          <p class="home-introduction">{{item.describe}}</p>
        <span>{{item.created_at}}</span>
        </div>
        <img :lazy-load="true" :src="picPre + item.pic" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
      props:{
        Posts:{
          type:Array
        }
      },
      data(){
        let that = this;
        return {
          picPre: that.$api.picPre,
            comment: 'comment',
            notComment: 'notComment'
          }
      },
      methods:{
        toDetail(id){
			uni.navigateTo({
				url: '/amusement/detail?id=' + id
			})
        }
      }
    }
</script>

<style scoped>
.comment-module{
  padding: 30rpx 30rpx 30rpx 30rpx;
  border-bottom: 1rpx solid #EEEEEE;
}

  .commentMd-content{
    display: flex;
    justify-content: space-between;
    margin-top: 21rpx;
  }
  .commentMd-content>img{
    width: 214rpx;
    height: 212rpx;
    border-radius: 10rpx;
  }
  .commentMd-content>div{
    flex: 1;
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(50,50,50,1);
    margin-right: 28rpx;
  }
.commentMd-content>div>p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.commentMd-content>div>span{
  font-size:20rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(169,169,169,1);
}
.home-introduction{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #656565;
  font-size: 24rpx;
  margin: 18rpx 0 10rpx;
}
</style>
